<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="zh-CN">
	<%@ include file="/WEB-INF/include-head.jsp" %>
	
	<link rel="stylesheet" href="ztree/zTreeStyle.css">
	<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
	
	<link rel="stylesheet" href="css/pagination.css" />
	<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
	
	<script type="text/javascript" src="crowd-js/my-role.js?7"></script>
	<script type="text/javascript">
		$(function () {
			//1、为分页做准备,初始化数据，创建全局变量
			window.pageNum=1;
			window.pageSize=5;
			window.keyword="";
			
			//2、调用执行分页的函数，，显示分页效果  ，具体方法体在外部js里面
			generatePage();
			
			//3、全局搜索功能
			$("#serchBtn").click(function () {
				//获取关键词数据赋值给对应的全局变量
				window.keyword=$("#serchInput").val();
				//再调用分页函数，刷新页面数据（实际上是无刷新操作，不会刷新页面）
				generatePage();
			})
			
			//4、点击新增按钮打开模态框
			$("#showAddModalBtn").click(function () {
				$("#addModal").modal("show");
			})
			//5、模态框 — 新增  — 点击保存
			$("#saveRoleBtn").click(function() {
				//获取模态框中的数据，可以通过绑定id也可以使用这种方式
				var roleName=$("#addModal [name=rooleName]").val();
				//去一下空格
				roleName=$.trim(roleName);
				var createtime=getnowtime();
				
				//alert(roleName);
				alert(createtime);//不能直接传入到后台，因为后端是时间戳
				
				$.ajax( {
					"url":"role/do/save.ht",
					"type":"post",
					"data":{
						"name":roleName
						},
					"datatype":"json",
					"success":function(response){
						if(response.result=="SUCCESS"){
							layer.msg("新增成功");
							
							//将页码定位到最后一页并且重新加载分页数据
							window.pageNum=999999;
							generatePage();
						}
						if(response.result=="FAILED"){
							console.log("FAILED");
							layer.msg("新增失败"+response.message);
						}
						//关闭模态框
						$("#addModal").modal("hide");
					},
					"error":function(response){
						console.log("error");
						layer.msg(response.status+" "+response.satusText);
					}
				})
			})
			
			//6、给页面上的铅笔按钮绑定相应的单击函数，目的是打开模态框
			/* $(".pencilBtn").click(function() {
				alert("1111111111111111111111");
			}); */
			
			//使用jquery对象的on()函数可以解决上面的问题
			//①首先找到所有"动态生成"的元素所附着的"静态元素"
			//② on 函数的第一个参数是事件类型
			//② on 函数的第二个参数是找到真正要绑定的事件元素的选择器
			//② on 函数第三个参数是事件的响应函数
			
			$("#rolePageBody").on("click",".pencilBtn",function(){
				//打开模态框
				$("#editModal").modal("show");
				
			});
			
			//测试打开模态框
			/* var roleArray=[{roleId:5,roleName:'张三'},{roleId:6,roleName:'李四'}];
			showConfirmModal(roleArray); */
			
			//7、点击删除的时候，打开模态框，这个删除按钮是js动态生成的，我们要使用on
			$("#rolePageBody").on("click",".removeBtn",function(){
				
				//从当前按钮出发 获取角色名称
				var roleName=$(this).parent().prev().prev().text();
				
				var roleId=this.id;//这样就能获取，当前用户点击的id ,牛批啊
				//alert(roleId);
				
				//创建role对象存入数组
				var roleArray=[{roleId:this.id,roleName:roleName}];
				
				//打开模态框
				showConfirmModal(roleArray);
				
			}); 
			
			//8、点击确认模态框中的确认按钮进行删除
			$("#removeRoleBtn").click(function () {

			    debugger;
				var requestBody = JSON.stringify(window.roleIdArray);

				var deleteAjax= $.ajax({
					"url":"role/remove/by/role/id/array.ht",
					"type": "post",
					"data": requestBody,
					"contentType":"application/json;charset=UTF-8",
					"dataType":"json",
					"success":function(response){
						if(response.result=="SUCCESS"){
							layer.msg("删除成功");
							$("#summaryBox").prop("checked",false);
							//将页码定位到最后一页并且重新加载分页数据
							window.pageNum=999999;
							generatePage();
						}
						if(response.result=="FAILED"){
							console.log("FAILED");
							layer.msg("删除失败"+response.message);
						}
						/*不管成功还是失败，最后记得关闭模态框，否则，，确认删除后，模态框不关闭  很影响用户体验*/
						$("#confirmModal").modal("hide");
					},
					"error":function(response){
						console.log("error");
						layer.msg(response.status+" "+response.satusText);
					}
				});
				console.log(deleteAjax);//如果想看详细调试结果就打印出来看看，很实用的一个技巧
			});
			//9、全选功能
			//给总的checkbox绑定单击响应函数
			$("#summaryBox").click(function() {
				
				//alert("你点击了全选");
				
				//获取当前全选框自身状态
				//访问checked属性就能够知道当前按钮的选中状态,返回的是true或者false
				var currentStatus=this.checked;
				//alert(currentStatus);
				
				//如何根据多选框的状态去设置(当前页)其它选择框的状态，需要在那些选择框加一个class 具体看笔记，这里不好描述
				$(".itemBox").prop("checked",currentStatus);//prop是永久性设置元素，att是一次性第二次点就没效果了
				
			});
			//10、下面的全部选上，全选按钮自动勾上
			//因为动态的所以要用on
			$("#rolePageBody").on("click",".itemBox",function(){

				//debugger;
				//获取当前已经选中的.itemBox的数量
				var chexkedBoxCount=$(".itemBox:checked").length;
				
				//获取全部.itemBox的数量
				var totalBoxCount=$(".itemBox").length;
				
				//使用二者的比较结果设置总的checkBox
				$("#summaryBox").prop("checked",chexkedBoxCount==totalBoxCount);
				
			});
			//12、给批量删除的按钮绑定单击响应函数
			$("#batchRemoveBtn").click(function(){
				
				//创建一个数组对象用来存放数组对象
				var roleArray=[];
				
				//遍历当前选中的多选框
				$(".itemBox:checked").each(function(){
					
					//使用this引用当前遍历得到的多选框
					var roleId=this.id;
					
					//通过DOM操作获取角色名称
					var roleName=$(this).parent().next().text();
					//alert (roleName);
					
					//数组对象存入数据
					roleArray.push({
						"roleId":roleId,
						"roleName":roleName
					});
				});
				//检查一下 roleArray的长度是否为0，为0就没必要执行下面的了，给出提示就会
				if(roleArray.length==0){
					layer.msg("请至少选择一个才能进行批量删除");
					return;
				}
				//调用专用的函数，打开模态框
				//打开模态框
				showConfirmModal(roleArray);
			});
			
			//13、给分配权限按钮绑定单击响应函数
			$("#rolePageBody").on("click",".checkBtn",function () {
			   
			    //把当前角色的 id 存入全局变量
				window.roleId=this.id;
			 
				//打开模态框
				$("#assignModal").modal("show");
				
				// 在模态框中装载数Auth的结构数据
				fillAuthTree();     //这个方法在外部js里面
            });
			//14、给分配权限模态框中的“分配”按钮 绑定单击响应函数
			$("#assignBtn").click(function () {
				debugger;
			    // 1、收集树形结构的各个节点中被勾选的节点
				//[1]声明一个专门的数组存放id
				var authIdArray=[];
				
				//[2] 获取zTreeObject对象
				var zTreeObj=$.fn.zTree.getZTreeObj("authTreeDemo");
				
				//[3] 获取全部被勾选的节点
				var checkedNodes = zTreeObj.getChangeCheckedNodes();
				
				//[4] 遍历checkedNodes
				for (var i=0;i<checkedNodes.length;i++){
				    var checkedNode=checkedNodes[i];
				    
					var authId=checkedNode.id;//选择节点的id就是权限的id
					
					authIdArray.push(authId);
				}
				///alert(authIdArray);
				
				//2、发送请求执行分配
				debugger;
                /*var requestBody={
                    "authIdArray":[2,5,9],
                    "roleId":[3]
                }*/
				var requestBody={
				    "authIdArray":authIdArray,
                    "roleId":[window.roleId]
				}
                requestBody=JSON.stringify(requestBody);
				$.ajax({
					"url":"assign/do/role/assign/auth.json",
					"type":"post",
					"data":requestBody,
					"contentType":"application/json;charset=UTF-8",
					"dataType":"json",
					"success":function (response) {
					    var result=response.result;
					    if (result=="SUCCESS") {
					        layer.msg("操作成功");
					    }
					    if (result=="FAILED"){
					        layer.msg("操作失败："+response.message);
					    }
                    },
					"error":function (response) {
                        layer.msg("错误了"+response.statusText);
                    }
				});
			    $("#assignModal").modal("hide");
            });
		});
		
		

		//以下共公方法（暂时没用到）
		//1、获取当前时间,格式 2015-09-05 10:00:00.000
        function getnowtime() {
            var nowtime = new Date();
            var year = nowtime.getFullYear();
            var month = padleft0(nowtime.getMonth() + 1);
            var day = padleft0(nowtime.getDate());
            var hour = padleft0(nowtime.getHours());
            var minute = padleft0(nowtime.getMinutes());
            var second = padleft0(nowtime.getSeconds());
            var millisecond = nowtime.getMilliseconds(); millisecond = millisecond.toString().length == 1 ? "00" + millisecond : millisecond.toString().length == 2 ? "0" + millisecond : millisecond;
            return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second + "." + millisecond;
        }
        //补齐两位数
        function padleft0(obj) {
            return obj.toString().replace(/^[0-9]{1}$/, "0" + obj);
        }
	</script>
  <body>
  		<%@ include file="/WEB-INF/include-nav.jsp" %>
    <div class="container-fluid">
			<%@ include file="/WEB-INF/include-sidebar.jsp" %>


		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						<i class="glyphicon glyphicon-th"></i> 数据列表
					</h3>
				</div>
				<div class="panel-body">
					<form class="form-inline" role="form" style="float: left;">
						<div class="form-group has-feedback">
							<div class="input-group">
								<div class="input-group-addon">查询条件</div>
								<input id="serchInput" class="form-control has-success" type="text"
									placeholder="请输入查询条件">
							</div>
						</div>
						<button id="serchBtn" type="button" class="btn btn-warning">
							<i class="glyphicon glyphicon-search"></i> 查询
						</button>
					</form>
					<button type="button" id="batchRemoveBtn"  class="btn btn-danger"
						style="float: right; margin-left: 10px;">
						<i class=" glyphicon glyphicon-remove"></i> 删除
					</button>
					<button type="button" id="showAddModalBtn" class="btn btn-primary" style="float: right;">
						<i class="glyphicon glyphicon-plus"></i> 新增
					</button>
					<br>
					<hr style="clear: both;">
					<div class="table-responsive">
						<table class="table  table-bordered">
							<thead style="text-align: center;">
								<tr>
									<th width="30">#</th>
									<th width="30"><input id="summaryBox" type="checkbox"></th>
									<th>名称</th>
									<th width="120">创建日期和时间</th>
									<th width="120">操作</th>
								</tr>
							</thead>
							<tbody id="rolePageBody">
<!-- 							<tr>
									<td>1</td>
									<td><input type="checkbox"></td>
									<td>PM - 项目经理</td>
									<td>
										<button type="button" class="btn btn-success btn-xs">
											<i class=" glyphicon glyphicon-check"></i>
										</button>
										<button type="button" class="btn btn-primary btn-xs">
											<i class=" glyphicon glyphicon-pencil"></i>
										</button>
										<button type="button" class="btn btn-danger btn-xs">
											<i class=" glyphicon glyphicon-remove"></i>
										</button>
									</td>
								</tr> -->
							</tbody>
							<tfoot>
								<tr>
									<td colspan="6" align="center">
<!-- 									<ul class="pagination">
											<li class="disabled"><a href="#">上一页</a></li>
											<li class="active"><a href="#">1 <span
													class="sr-only">(current)</span></a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">4</a></li>
											<li><a href="#">5</a></li>
											<li><a href="#">下一页</a></li>
										</ul> -->
										<div id="Pagination" class="pagination"><!-- 这里显示分页,具体是js生成的（代替了上面的代码） --></div>
									</td>
								</tr>

							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<%@include file="/WEB-INF/role/modal-role-add.jsp" %>
		<%@include file="/WEB-INF/role/modal-role-edit.jsp" %>
		<%@include file="/WEB-INF/role/modal-role-confirm.jsp" %>
	    <%@include file="/WEB-INF/role/model-role-assign-auth.jsp" %>
	</div>
  </body>
</html>
